<extend name="Common:base"/>
<block name="head">
  <style>
    .el-tabs__header{
      border-top:2px solid #ea4b4b;
      border-bottom: 1px solid #c51f1f;
    }
    .el-dialog .el-tabs__header{
      border-top:none;
    }
    .el-tabs--border-card .el-tabs__item{
      border-left: none;
    }
    .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
      border-left-color: #d1dbe5;  
      border-right-color: #d3dce6;
      background: #544b8f;
      color: #fff;
    }
    .el-tabs--border-card .el-tabs__header {
      background-color: #fff;
      margin: 0;
    }
    .container > .wrapp > .a > .el-row {
      margin-bottom: 6px;
    }
    .el-tabs--border-card .el-tabs__content{
      padding:0 9px 5px 9px;
    }
    .el-card, .el-menu--horizontal .el-submenu>.el-menu, .el-tabs--border-card{
      box-shadow: none;
    }
    .el-tabs--border-card{
      border: none;
    }
    .el-tabs__item{
    	font-family: Microsoft YaHei;
    	color:#0d0f10;
    	font-size: 14px;
    }
    .el-dialog__body{
      color: rgb(72, 87, 106);
      font-size: 14px;
      /*padding: 30px 20px;*/
      padding: 30px 20px 6px 20px;
    }
  </style>
</block>
<block name="body">
	<div id="app" class="container">
		<div class="wrapp" v-show="show" style="display:none;">
			<div class="a">
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchForm" :model="searchForm">
          		<el-form-item v-show="departName=='总部'">
	              <el-select size="small" style="width:150px;" v-model="searchForm.belongs_department" clearable filterable allow-create placeholder="所属部门">
                  <el-option v-for="department in belongsDepartment" :label="department.name" :value="department.name"></el-option>
	              </el-select>
			  		  </el-form-item>
			  		  
			  		  <el-form-item prop="type">
	              <el-select size="small" style="width:120px;" v-model="searchForm.type" 
                  placeholder="所属分类">
                  <el-option v-for="(value,key) in type" :label="value" :value="key"></el-option>
	              </el-select>
			  		  </el-form-item>

			  		  <el-form-item prop="name" style="width:150px">
			  		    <el-input v-model="searchForm.name" size="small" placeholder="用品名称"></el-input>
			  		  </el-form-item>

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalist">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
              <el-form-item>
	              <el-tooltip content="清空搜索框并刷新表格数据" placement="bottom-start">
	                <el-button size="small" @click="searchReset">重置</el-button>
	              </el-tooltip>
              </el-form-item>

	            <el-form-item>
	              <el-tooltip content="点击刷新当前页面" placement="right">
	                <el-button @click="refresh" size="small" type="danger">刷新</el-button>
	              </el-tooltip>
	            </el-form-item>

            </el-form>
          </el-col>
			  </el-row>

			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="dataList"
                @row-dblclick = "showInfo"
                @row-click = "showRowInfo"
	              element-loading-text="{:L('DATA_LOGIN')}"
	              empty-text="暂无数据！"
	              highlight-current-row ref="select" border >

			  	    <el-table-column label="{:L('INDEX')}" type="index" width="65" >
			  	    </el-table-column>
			  	    <el-table-column  align="center" prop="belongs_department" label="部门">
	            </el-table-column>

              <el-table-column  align="center" prop="name" label="品名" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="type" label="类别">
              </el-table-column>

              <el-table-column  align="center" prop="specification" label="规格"  show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="unit" label="单位">
              </el-table-column>

              <el-table-column  align="center" prop="total_num" label="总入库数量">
              </el-table-column>

              <el-table-column  align="center" prop="inventory_num" label="库存数量">
              </el-table-column>
              
              <el-table-column  align="center" prop="use_num" label="领用数量">
              </el-table-column>
              
              <el-table-column  align="center" prop="return_num" label="归还数量">
              </el-table-column>

              <el-table-column  align="center" prop="using_num" label="使用数量">
              </el-table-column>

              <el-table-column  align="center" prop="repair_num" label="报修数量">
              </el-table-column> 

	            <el-table-column  align="center" prop="scrap_num" label="报废数量">
	            </el-table-column>
	          </el-table>
          </el-col>
			  </el-row>

			  <el-row>
			  	<el-col :span="12">
			      <div class="grid-content bg-purple">
              <span class="wrapper">

              </span>
			      </div>
			    </el-col>
			  	<el-col :span="12" :offset="12">
			      <div class="grid-content bg-purple-light pull-right">
			        <!-- page -->
			        <include file="Common:_pagination" />
			        <!-- / page -->
			      </div>
			    </el-col>
			  </el-row>
			</div>

			<div class="dialogWrapper" v-show="show" style="display: none">
        <!-- 展示行信息 -->
        <include file="_infoContents" />
        <!-- / 展示行信息 -->
			</div>
      <!--<div style="margin:5px -10px 5px;" v-show="showTab">
        <el-row >
         <el-col :span="24">
            <el-tabs type="border-card">
              <el-tab-pane label="变更明细">
                <el-table :data="changeInfoData" empty-text="请点击物品显示变更信息" style="width: 100%"  @row-dblclick="showChangeInfo" border>
                  <el-table-column label="{:L('INDEX')}" type="index" width="65" >
                  </el-table-column>

                  <el-table-column  align="center" prop="name" label="品名" show-overflow-tooltip>
                  </el-table-column>

                  <el-table-column  align="center" prop="type" label="类别">
                  </el-table-column>

                  <el-table-column  align="center" prop="specification" label="规格"  show-overflow-tooltip>
                  </el-table-column>

                  <el-table-column  align="center" prop="unit" label="单位">
                  </el-table-column>

                  <el-table-column  align="center" prop="price" label="单价(元)">
                  </el-table-column>

                  <el-table-column  align="center" prop="num" label="数量">
                  </el-table-column>

                  <el-table-column  align="center" prop="app_name" label="领用人">
                  </el-table-column> 

                  <el-table-column  align="center" prop="time" label="变更日期" width="180px">
                  </el-table-column>
                  
                  <el-table-column  align="center" prop="status" label="状态">
                  </el-table-column>

                  <el-table-column  align="center" prop="remark" label="备注" show-overflow-tooltip>
                  </el-table-column>

                </el-table>
              </el-tab-pane>
            </el-tabs>
         </el-col>
        </el-row>
      </div>-->
      
			<div style="margin:5px -10px 5px;" v-show="showTab" class="a">
				<hr  style="height:3px;border:none;border-top:1px solid #C51F1F;"/>
				<el-row>
        	<el-col :span="24">
          	<el-form :inline="true" ref="searchsForm" :model="searchsForm">
          		
          		<el-form-item>
	                <el-button type="primary" size="medium" >变更明细</el-button>
	            </el-form-item>
	            
          		<el-form-item prop="time">
                <el-date-picker size="small" v-model="searchsForm.time" 
                  placeholder="请选择变更时间范围" 
                  type="daterange"
                  @change="startDateChange" style="width:210px;">
                </el-date-picker>
            </el-form-item>
			  		  

	            <el-form-item>
	              <el-tooltip content="填写或者选择好筛选条件后点击此按钮" placement="bottom-start">
	                <el-button type="info" size="small" icon="search" @click="loadDatalists">查询</el-button>
	              </el-tooltip> 
	            </el-form-item>
             
            </el-form>
          </el-col>
			  </el-row>
			  
			  <el-row>
        	<el-col :span="24">
	          <el-table v-loading="dataLoad" :data="tableData"
	              element-loading-text="{:L('DATA_LOGIN')}"
	              empty-text="暂无数据！"
	              highlight-current-row ref="select" border >

              <el-table-column  align="center" prop="name" label="品名" show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="type" label="类别">
              </el-table-column>

              <el-table-column  align="center" prop="specification" label="规格"  show-overflow-tooltip>
              </el-table-column>

              <el-table-column  align="center" prop="unit" label="单位">
              </el-table-column>

              <el-table-column  align="center" prop="price" label="单价(元)">
              </el-table-column>

              <el-table-column  align="center" prop="num" label="数量">
              </el-table-column>

              <el-table-column  align="center" prop="app_name" label="领用人">
              </el-table-column> 

              <el-table-column  align="center" prop="time" label="变更日期" width="180px">
              </el-table-column>
              
              <el-table-column  align="center" prop="status" label="状态">
              </el-table-column>

              <el-table-column  align="center" prop="remark" label="备注" show-overflow-tooltip>
              </el-table-column>
	          </el-table>
          </el-col>
			  </el-row>
			  <div class="pull-right">
	        <el-pagination
	          @current-change="tablePageChange"
	          :current-page="tableCurrentPage"
	          layout="total, prev, pager, next"
	          :total="tablePageCount"
	          :page-size="8">
	        </el-pagination>
	      </div>
			</div>
		</div>

	</div>
</block>
<block name="scripts">
<script type="text/javascript">
	window.defaultOption.setDatas({
		dialogLabelWidth:"120px",
		infoDialog:false,
    infoData:{},
    showTab:false,
    tableData:[],
    dataList:[],
    type:{:json_encode($type)},
    name:{:json_encode($name)},
    belongsDepartment:{:json_encode($belongsDepartment)},
    departName:{:json_encode($departName)},
    tableCurrentPage:1,
    tablePageCount:0,
    par:{
      name:'',
      specification:'',
      unit:'',
      belongs_department:'',
      p:1,
      start1:'',
      start2:'',
    }
	}).setForm('search',{
		belongs_department:{:json_encode($departName)},
		type:"",
    name:'',
	}).setForm('searchs',{
    time:'',
	}).setMethod('showInfo',function(row, event){
    this.infoData = row;
    this.infoDialog = true;
    this.par.p=1;
    console.log(row);
  }).setMethod('showRowInfo',function(row, event, column){
    this.showTab = true;
    //var vmThis = this;
    this.par.name = row.name;
    this.par.specification = row.specification;
    this.par.unit = row.unit;
    this.par.belongs_department = row.belongs_department;
    this.par.p=1;
    this.getOrderInfoTable('tableData','tablePageCount');
    
  	/*this.$http.get('{:U("InventoryInformation/getChangeDetail")}',{params:{name:row.name,specification:row.specification,unit:row.unit,belongs_department:row.belongs_department} }).then(function(response){
  		console.log(response);
			//得到数据赋值给changeInfoData,可以在这里进行查询分页操作
			
			// 在显示之前 对数据进行处理
			if (this.beforeList) {
				vmThis.$set(vmThis, 'changeInfoData', this.beforeList(response.body));
			} else {
				vmThis.$set(vmThis, 'changeInfoData', response.body);
			}
			//vmThis.$set(vmThis, 'total',    parseInt(response.body.count));
		}, function(response) {
			vmThis.$message({
			  message: '获取数据失败：'+ response.body.info,
			  type: 'error'
			});//暂时这样
		}).finally(function(){
			vmThis.$set(vmThis, 'dataLoad', false);
		});*/

  }).setMethod('tablePageChange',function(v){
  	for (var x in this.searchsForm ){
			if (this.searchsForm[x]!="") {
				this.par[x] = this.searchsForm[x];
			}
		}
    this.par.p = v;
    this.tableCurrentPage = v;
    this.getOrderInfoTable('tableData','tablePageCount');
  }).setMethod('getOrderInfoTable',function(tableName,tablePageCount){
  	
    var vmThis = this;
    this.$http.get("{:U('InventoryInformation/getChangeDetail')}",{params:this.par}).then(function(response){
      vmThis.$set(vmThis, 'tableData', response.body.list);
      vmThis.$set(vmThis, 'tablePageCount',    parseInt(response.body.count));
      console.log(response.body.list);
    },function(response){
      console.log("查询失败1");
    });
  }).setMethod('showChangeInfo',function(row, event){
    console.log(row);
  }).setMethod('startDateChange', function(v){
    this.searchsForm.start1 = v.slice(0,10);
    this.searchsForm.start2 = v.slice(13);
    console.log(v);
  }).setMethod('loadDatalists', function(){
    var vmThis = this;
		var params = {p:1};
		for (var x in this.searchsForm ){
			if (this.searchsForm[x]!="") {
				params[x] = this.searchsForm[x];
			}
		}
		params['name'] = this.par.name;
		params['specification'] = this.par.specification;
		params['unit'] = this.par.unit;
		params['belongs_department'] = this.par.belongs_department;
		
    this.$http.get("{:U('InventoryInformation/getChangeDetail')}",{params:params}).then(function(response){
    	vmThis.$set(vmThis, 'tableData', response.body.list);
      vmThis.$set(vmThis, 'tablePageCount',    parseInt(response.body.count));
    },function(response){
      console.log("查询失败2");
    });
  });
</script>
</block>